module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/yepjoy-ui/lib/**/*.{vue,js,ts,jsx,tsx}',
  ],
  darkMode: 'class', //  'media' or 'class'
  theme: {
    extend: {
      textColor: {
        theme: 'var(--text-color)',
      },
      borderColor: {
        theme: 'var(--border-color)',
      },
      backgroundColor: {
        theme: 'var(--background-color)',
        'theme-title': 'var(--background-color-title)',
      },
      backgroundImage: {
        theme: 'var(--background-image)',
        'theme-title': 'var(--background-image-title)',
      },
      backgroundSize: {
        full: '100% 100%',
      },
      boxShadow: {
        theme: 'var(--box-shadow)',
      },
    },
  },
  variants: {
    extend: {
      // boxShadow: ['dark'],
    },
  },
  plugins: [
    ({ addBase }) => {
      addBase({
        '.el-button': {
          'background-color': 'var(--el-button-bg-color,var(--el-color-white))',
        },
      })
    },
  ],
}
